/* eslint-disable handle-callback-err */
<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar title="用户登陆" />
    <van-form @submit="onSubmit">
      <div class="btn-wrap">
        <van-field
          required
          v-model.trim="info.mobile"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          required
          v-model.trim="info.code"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        <div class="btn">
          <van-button block type="info" native-type="submit">登陆</van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
// import { mapMutations } from "vuex";

export default {
  name: 'Login',
  data () {
    return {
      info: {
        mobile: '13912345678',
        code: '246810'
      }
    };
  },
  created () {},
  methods: {
    // ...mapMutations(["mSetTokenInfo"]),
    onSubmit () {
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        mask: true, // 整体添加一个遮罩
        message: '加载中...'
      });
      this.api
        .authorizations(this.info)
        .then((res) => {
          console.log('000', res);
          if (res.status === 201) {
            this.$toast.success('登陆成功');
            // this.mSetTokenInfo(res.data.data);
            // setItem("tokenIfon", res.data.data);
            this.$store.commit('mSetTokenInfo', res.data.data);
            this.$router.push('/');
          }
        })
        .catch((err) => {
          console.log(err);
          this.$toast.fail('登陆失败');
        });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  // 让登陆按钮居中
  .btn-wrap {
    padding: 20px;
    .btn {
      width: 100%;
      background-color: #6db4fb;
      color: #fff;
    }
  }
}
</style>>
